import apiTool, {
  getUserInfoUrl,
  getUserTypeValue,
  phoneClick,
} from "@/command/apiTool";
import { defineComponent, reactive, ref } from "vue";
import PageTitle from "@/components/PageTitle";
import ListView from "@/components/ListView";
import { IFilterMenuChoose } from "@/components/FilterMenu/types";
import ButtonGroupView from "@/components/ButtonGroupView";
import { IButtonGroupViewData } from "@/components/ButtonGroupView/types";
import RoundInfo from "@/components/RoundInfo";
import GreyBlock from "@/components/GreyBlock";
import RowView from "@/components/RowView";
import TextView from "@/components/TextView";
import Text from "@/components/Text";
import { Divider } from "vant";
import FilterMenuSearch from "@/components/FilterMenuSearch";
import CardView from "@/components/CardView";
import ColView from "@/components/ColView";
import { useRouter } from "vue-router";
export default defineComponent({
  setup(props, {}) {
    const router = useRouter();
    const form = ref({ userName: "" });
    const renderItem = (e: any) => {
      console.log("信息", e);

      const bottomLabel = () => {
        return (
          <ColView class={"h-[55px]"}>
            <TextView class={"w-[50vw] break-words"}>{e.content}</TextView>
          </ColView>
        );
      };
      return (
        <RowView class="justify-between w-full">
          <div onClick={() => router.push(`/farmProductDetailXh?id=${e.id}`)}>
            <RoundInfo
              src={e.path}
              title={e.name}
              class="roundinfo-expert"
              v-slots={{ bottomLabel }}
            />
          </div>

          {/*
            代购操作需要指定大户 
          <div>
            <ColView class="items-center justify-center">
              <img
                src={"https://qfile.nongqibang.com/47141%402x.png"}
                class="!w-[44px] !h-[44px]"
                onClick={() =>
                  router.push(`/behalfBuyApplication?productionId=${e.id}`)
                }
              />
            </ColView>
          </div> */}
        </RowView>
      );
    };
    const render2 = () => {
      const data: IFilterMenuChoose[] = [
        // { type: "area", key: "areaCode" },
        { type: "agriculturalType", key: "type", title: "农资品类" },
        // { type: "datePicker", key: "time" },
      ];
      const page = ref();
      return (
        <CardView title="农资列表" radius={0}>
          <FilterMenuSearch
            modelValue={form.value}
            searchKey="title"
            choose={data}
          />
          <ListView
            {...getUserInfoUrl(
              {
                dh: "",
                xh: "/api/H5/richMeansOfAgriculturalProduction/small/list",
              },
              form.value
            )}
            ref={page.value}
            type="page"
            renderItem={renderItem}
            itemHeight={140}
            themeStyle="list-bottom-border"
          />
        </CardView>
      );
    };
    return () => (
      <PageTitle title={"农资大厅"} childClass={"mt-[10px]"}>
        {render2()}
      </PageTitle>
    );
  },
});
